<template>
  <transition name="message">
    <div class="modal-wrapper">
      <div class="modal-box">
        <header>
          <div class="title">{{ title }}</div>
          <div class="close" @click="close"><i class="iconfont icon-close"></i></div>
        </header>
        <div class="content"><i :class="iconCls"></i>{{ content }}</div>
        <footer>
          <button class="cancel" @click="cancel">{{ cancelText }}</button>
          <button class="query" @click="ok">{{ okText }}</button>
        </footer>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    type: String,
    title: String,
    content: String,
    cancelText: {
      type: String,
      default: () => '取消'
    },
    okText: {
      type: String,
      default: () => '确定'
    }
  },
  data() {
    return {}
  },
  methods: {
    close() {},
    ok() {
      this.$emit('onOk')
    },
    cancel() {
      this.$emit('onCancel')
    }
  },
  computed: {
    iconCls: function() {
      return ['iconfont', `icon-${this.type}`]
    }
  }
}
</script>
